<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<style>
.dt-modal-template {
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
.dtdb-main {
    position: relative;
}
.dt-modal-wrapper {
    background: #fff;
    width: 100%;
    max-width: 300px;
    position: relative;
}
.dt-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0 10px;
    cursor: default;
    position: relative;
}
span.dt-modal-header-title {
    font-size: 14px;
    font-weight: 600;
}
.dt-modal-header:after {
    content: "";
    display: block;
    width: calc(100% - 48px);
    bottom: 0;
    left: 24px;
    height: 1px;
    background: #F0F0F0;
    position: absolute;
}
.dt-modal-wrapper-box {
    padding: 0 24px;
}
.dt-modal-content {
    padding: 16px 0;
    text-align: center;
    font-size: 14px;
}
.dt-modal-footer {
    border-top: 1px solid #F0F0F0;
    text-align: center;
    padding: 16px 0;
}

.dtmf-groove-row {
    text-align: center;
}
.dtmf-serve-y {
    font-size: 12px;
    color: #fff;
    border: none;
    padding: 8px 30px;
    margin-right: 16px;
    background: #6ACC6E;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: unset;
}
button.dtmf-serve-n {
    font-size: 12px;
    color: #B3B3B3;
    padding: 8px 30px;
    background: transparent;
    border-radius: 3px;
    border: 1px solid #B3B3B3;
    cursor: pointer;
}
</style> 

<div class="dtdb-main">
    <div  class="dtdb-list" data-popup="#shade-info-template">Tracking Info. not Updated</div>

    <div id="shade-info-template" class="dt-modal-template" style="display: none;">
        <div class="tracking-info-not-updated dt-modal-wrapper">
            <div class="dt-modal-header">
                <span class="dt-modal-header-title">Tracking Info. not Updated</span>
            </div>
            
            <div class="dt-modal-wrapper-scroll">
                <div class="dt-modal-wrapper-box">
                    <div class="dt-modal-content">
                        <div class="dtmc-describe">
                            <div class="dtmc-describe-text">
                                We apologize for any inconvenience caused by the logistics issue. If your parcel's tracking information hasn't 
                            </div>
                        </div>
                    </div>
                    <div class="dt-modal-footer">
                        <div class="dtmf-groove-row">
                            <a href="" class="dtmf-serve-y" >YES</a>
                            <button class="dtmf-serve-n dt-modal-close-btn">NO</button>
                        </div>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
    
</div>

<script>
// 打开弹窗
function ModalOpen(el){
    $(el).show();
    $(el).find(".dt-modal-close-btn").on("click",function(){
        $(el).hide();
    });
    $(el).on("click",function(event){
        if ($(el).is(event.target) && $(el).has(event.target).length === 0) {
            $(el).hide();
        }
    });
};

$("[data-popup]").on("click",function(e){
    ModalOpen($(this).data('popup'));
});
</script>

</body>
</html>